<template>
    <div>
      <m-head title="账户与安全"></m-head>
      <div class="list">
        <div class="item" @click="$router.push('/BindWx')">
          <h3>微信号</h3>
          <div>{{userInfo.wx ? userInfo.wx:'未绑定'}}</div>
          <span class="arrow"></span>
        </div>
        <div class="item" @click="$router.push('/binding')">
          <h3>手机号</h3>
          <div>{{userInfo.phone ? userInfo.phone:'未绑定'}}</div>
          <span class="arrow"></span>
        </div>
        <div class="item" @click="$router.push('/setpassword')">
          <h3>登录密码</h3>
          <span class="arrow"></span>
        </div>
      </div>
    </div>
</template>

<script>
import MHead from './MHeader'
import * as user from '../api/user'
export default {
  name: 'account',
  components: {
    'm-head': MHead
  },
  data () {
    return {
      userInfo: {}
    }
  },
  mounted(){
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      user.userInfo().then(res => {
        console.log(res)
        this.userInfo = res.data
      })
    }
  }
}
</script>

<style scoped>
.item{
  border-bottom: 1px solid #eee;
  padding: .3rem .6rem .3rem .3rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  align-items: center;
}
.item h3{
  font-size: .42rem;
  color: #333;
  flex-shrink: 0;
  margin-right: .4rem;
}
.item div{
  font-size: .42rem;
  color: #777;
}
.item .arrow{
  right: .3rem;
}
</style>
